.hole-div{
    display: grid;
    grid-template-columns: 100fr;
    grid-template-rows: 10fr 85fr 5fr;
    justify-content: center;
    border: 1px solid black;
    width: 80%;
    margin: 10% 10%;
    height: 100%;
}
.top-search{
    background-color: rgb(0, 151, 255);
    display: grid;
    grid-template-rows: 3fr 7fr;
    grid-template-columns: 100fr;
    width: 100%;
    height: auto;
}
.top-search-topleft{
    background-color: rgb(65, 60, 60);
}
.top-search-bottom{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
}
.top-search-input{
    width: 70%;
    height: auto;
}
.mid-show{
    background-color: #fff;
    display: grid;
    grid-template-rows: 2fr 2fr 6fr;
}
.mid-show-select{
    display: grid;
    grid-template-rows: 5fr 5fr;
    grid-template-columns: repeat(3,auto);
    align-items: center;
    justify-items: center;
}
.mid-show-img{
    width: 50px;
    height: auto;
}
.mid-show-recommend{
    background-color: rgb(70, 193, 105);
}
.mid-show-recommend >img {
    width: 100px;
    height: auto;
}
.mid-show-details{
    background-color: rgb(215, 215, 69);
}
.mid-show-details >img {
    width: 100px;
    height: auto;
}